<!-- 实习生证明模板 -->
<template>
  <PageHeaderNew :title="title" :breadCrumb="breadCrumb" :showBack="true">
    <template #buts>
      <a-button type="primary" @click="goInternshipTemplateDetail()">
        新增模板
      </a-button>
    </template>
  </PageHeaderNew>
  <div class="base-setting-warp">
    <a-space>
      <a-input-search
        v-model="nameSearch"
        placeholder="请输入模板名称，按下回车可以搜索"
        :style="{
          width: '300px'
        }"
        search-button
        @search="onSearch"
        @press-enter="onSearch"
      >
        <icon-search />
      </a-input-search>
    </a-space>
    <TableTurn
      :args="args"
      ref="tableRef"
      :tableData="getInternshipTemplateData"
      style="margin-top: 20px"
    >
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="模板名称" dataIndex="name">
      </a-table-column>
      <a-table-column :width="150" title="模板说明" dataIndex="remark">
      </a-table-column>
      <a-table-column :width="150" title="模板页面方向" dataIndex="direction">
        <template #cell="{ record }">
          {{ record.direction === 1 ? '纵版' : '横版' }}
        </template>
      </a-table-column>
      <a-table-column :width="150" title="启用状态" dataIndex="enable">
        <template #cell="{ record }">
          <span
            :style="{
              color: record.enable === 2 ? 'red' : ''
            }"
          >
            {{ record.enable === 1 ? '是' : '否' }}
          </span>
        </template>
      </a-table-column>
      <a-table-column :width="200" title="是否为默认模板" dataIndex="required">
        <template #cell="{ record }">
          <a-switch
            :checked-value="1"
            :unchecked-value="2"
            v-model="record.required"
            @change="stateChange(record)"
          />
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="200" fixed="right">
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goInternshipTemplateDetail(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm content="是否确认删除该条数据?" @ok="del(record)">
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
  </div>
</template>
<script setup lang="ts">
import {
  GetInternshipCertificateTemplate,
  PostInternshipCertificateTemplate,
  PutInternshipCertificateTemplate,
  PutInternshipCertificateTemplateState,
  DelInternshipCertificateTemplate
} from '@/apis/management/human/baseSetting/internshipSetting';
import TemplateCard from './components/index.vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const title = '实习证明模板方案配置';
const breadCrumb: string[] = [
  '人事',
  '基础设置',
  '实习期管理',
  '实习证明模板方案配置'
];

let tableRef = ref(); // 储存table的ref
let singleSelectId = 0; // 储存单个id
/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);
const selectedListData = computed(() => tableRef.value.selectedListData);

// 选择器配置
const args = reactive({
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
});
const templateList = ref();
let nameSearch = ref('');
//获取实习生证明模板列表
const getInternshipTemplateData = async (pageData?: any) => {
  const res = await GetInternshipCertificateTemplate({
    ...pageData,
    name: nameSearch.value
  });
  return Promise.resolve(res);
};

const onSearch = () => {
  refresh();
};

//接收子组件修改状态，启用、禁用
const stateChange = async (record: any) => {
  if (record.required === 2) Message.error('必须拥有一个默认模板！');
  else
    await PutInternshipCertificateTemplateState({
      id: record.id
    });
  refresh();
};
//去新增或编辑模板
const goInternshipTemplateDetail = (data?: any) => {
  let id = data && data.id! > 0 ? data.id : void 0;
  router.push({
    name: 'InternshipTemplateDetail',
    query: {
      ...data
    }
  });
};
//编辑
const edit = (data: any) => {
  goInternshipTemplateDetail({ id: data.id });
};
//删除
const del = async (record: any) => {
  if (selectedList.value.length > 0) {
    if (selectedListData.value.find((item: any) => item.required === 1)) {
      Message.error('默认模板不能删除！');
    } else {
      await DelInternshipCertificateTemplate({
        ids: selectedList.value
      });
      tableRef.value.selectedList = [];
      tableRef.value.loadData();
    }
  } else {
    if (record.required === 1) Message.error('默认模板不能删除！');
    else {
      await DelInternshipCertificateTemplate({
        ids: [record.id]
      });
    }
    refresh();
  }
  // singleSelectId = id;
  // let ids: any = []; // 储存选中的id
  // if (singleSelectId > 0 && selectedList.value.length === 0) {
  //   ids.push(singleSelectId);
  // } else {
  //   selectedList.value.forEach((item: any) => {
  //     ids.push(item);
  //   });
  // }
  // await DelInternshipCertificateTemplate({
  //   ids: ids
  // });
  // refresh();
};

const refresh = () => {
  tableRef.value.loadData();
};
</script>
<style lang="less" scoped>
.base-setting-warp {
  padding: 10px 20px;
}
</style>
